<!-- 加载状态 -->
<template>
	<div v-if="!forList || !ignoreList" :style="[{width: '100%'}, forList ? {marginTop, flexDirection: 'row'} : {marginTop: marginTop || '30%', flexDirection: 'column'}, ...custStyle]" class="center" @click="$emit('click')">
		<IconFont v-if="iIcon" :class="{transition: iIcon === 'load_ing'}" :type="iIcon" :size="iSize" :color="iColor"/>
		<CaLabel v-if="iText && !noText" :text="iText" :color="textColor" :size="textSize" :style="[forList ? {marginLeft: '3px'} : {marginTop: '3px'}]"/>
	</div>
</template>

<script>
	
	import base from '@/components/index.vue'
	
	export default {
		extends: base,
		props: {
			/**
			 * 加载状态
			 * loading：加载中。仅有的一例自动旋转
			 * loading-list：加载中，同上 - 列表页
			 * noData：没有数据
			 * error：加载失败
			 * error-list：加载失败 - 列表页
			 * params：参数错误
			 * noAuth：没有权限
			 * 
			 * noMore：没有更多数据 - 列表页
			 * more：上拉加载更多数据 - 列表页
			 */
			loading: String,
			// 是否忽略列表类型
			ignoreList: Boolean,
			// 默认距离顶部
			marginTop: String,
			// 自定义图标
			icon: String,
			// 图标大小
			size: Number,
			// 图标颜色
			color: String,
			// 是否完全没有文字
			noText: Boolean,
			// 自定义文字
			text: String,
			// 文字颜色
			textColor: {
				type: String,
				default: '#BBB'
			},
			// 文字大小
			textSize: {
				type: Number,
				default: 12,
			},
			// 自定义样式
			custStyle: Object,
		},
		watch: {
			loading: {
				deep: true,
				immediate: true,
				handler(val) {
					this.forList = val.substr(-5) === '-list' || val === 'more' || val === 'noMore'
					var iIcon, iText, iSize = 80, iColor = '#BBB';
					if (val.substr(-5) === '-list') {
						val = val.substr(0, val.length - 5);
					}
					switch (val){
						case 'loading':
							iIcon = 'load_ing';
							iText = '努力加载中...';
							iSize = 40;
							iColor = '#999';
							break;
						case 'noData':
							iIcon = 'load_nodata';
							iText = '没有数据';
							break;
						case 'error':
							iIcon = 'load_error';
							iText = '加载失败';
							break;
						case 'params':
							iIcon = 'load_params';
							iText = '参数错误';
							break;
						case 'noAuth':
							iIcon = 'load_noau';
							iText = '没有权限';
							break;
						case 'noMore':
							iIcon = '';
							iText = '没有更多数据';
							break;
						case 'more':
							iIcon = '';
							iText = '上拉加载更多数据';
							break;
						default:
							break;
					}
					if (!this.icon) {
						this.iIcon = iIcon;
					}
					if (!this.text) {
						this.iText = iText;
					}
					if (!this.color) {
						this.iColor = iColor;
					}
					if (!this.size) {
						if (this.forList) {
							return this.iSize = 14;
						}
						this.iSize = iSize;
					}
				},
			}
		},
		data() {
			return {
				iIcon: this.icon,
				iText: this.text,
				iSize: this.size,
				iColor: this.color,
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	/**
	 * 旋转动画
	 */
	.transition {
		animation: rotate 6s linear infinite;
	}
	
	@keyframes rotate {
		to{
			transform: rotate(360deg);
		}
	}
</style>